<template>
	<view class="service_list">
		<!-- 导航 -->
		<view class="padd_32 header clearfix">
			<!-- <view class="fl">
				<image @click="goBack" class="fl" src="/static/images/top_button_back@2x.png" mode="widthFix"></image>
			</view> -->
			<view class="tab fl">
				<text v-for="(item,i) in tabs" :key="i" :data-id="i" class="tit" :data-type='item.type' :class="{'cur': tabCur == i}"
				 @tap="tabSelect">{{item.name}}<text :class="tabCur==0?'cur_sp1':'cur_sp2'"></text></text>
			</view>
			<view class="fr">
				<!-- <image @click="open_drawer" class="fl" src="/static/images/top_icon_screen@2x.png" mode="widthFix"></image> -->
				<image @click="open_drawer" class="fl" src="/static/images/fdj.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- end -->

		<!-- 筛选 -->

		<!-- 	<view class="screen padd_32 clearfix">
			<view class="fl">
				<view style="border:none" class="header-text fl" @click="open_drawer">
					<text>{{address}}</text>
					<image src="/static/images/top_icon_screen@2x.png" mode="widthFix" class="fr icon"></image>
				</view>
			</view>
			<uni-popup ref="popup_sex" type="bottom">
				<view class="cont_sex">
					<view v-for="(item, index) in list" :data-id='item.name' :key='index' @click="changeDq">{{item.name}}</view>
					<view class="btn" @click="close_sex">取消</view>
				</view>
			</uni-popup>
		</view> -->

		<!-- end -->

		<!-- 列表数据 -->
		<view class="lists padd_32">
			<!-- <service-list ref="mescrollItem" :i="0" :index="tabCur"></service-list> -->
			<mescroll-body top="150" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			 :up="upOption">
				<staff-list :list="goods" :id="opId" v-if='tabCur == 0'></staff-list>
				<!-- <meal-list :list="goods" v-if='tabCur == 1'></meal-list> -->
				<shop-list :list="goods" :id="opId" v-if='tabCur == 1'></shop-list>
				<view v-if="goods.length==0" class="none">
					<view class="none-body">
						<cover-image class="none-image" src="../../../static/images/null.png"></cover-image>
						<view class="none-text">暂无数据</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<uni-drawer ref="drawer" mode="right" :width="width" :maskClick="true">
			<view class="drawer-body">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y drawer-card">
					<view class="drawer-title">区域</view>
					<!-- 全城 -->
					<view class="cards">
						<!-- <view :class="address==item.name?'card1':'card'" v-for="(item, index) in list" :data-id='item.name' :key='index'
						 @click="changeDq">{{item.name}}</view> -->
						 <view :class="address==address?'card1':'card'"  @click="changeDq">{{ address=='' ? '全城' : address}}</view>
					</view>
					<!-- 判断导航栏是人才库的时候一下内容展示出来否则只展示全城 -->
					<view v-if="tabsType == 'em'">
						<view class="drawer-title">工作经验</view>
						<view class="cards">
							<view :class="workExperience==item.value?'card1':'card'" v-for="(item, index) in list_gzjy" :data-id='item.value'
							 :key='index' @click="changeGzjy">{{item.name}}</view>
						</view>
						<view class="drawer-title">星级</view>
						<view class="cards">
							<view :class="scoreNum==item.value?'card1':'card'" v-for="(item, index) in list_xj" :data-id='item.value' :key='index'
							 @click="changeXj">{{item.name}}</view>
						</view>
						<view class="drawer-title">学历</view>
						<view class="cards">
							<view :class="education==item.value?'card1':'card'" v-for="(item, index) in list_xl" :data-id='item.value' :key='index'
							 @click="changeXl">{{item.name}}</view>
						</view>
						<view class="drawer-title">年龄</view>
						<view class="cards">
							<view :class="age==item.value?'card1':'card'" v-for="(item, index) in list_nl" :data-id='item.value' :key='index'
							 @click="changeNl">{{item.name}}</view>
						</view>
						<view class="drawer-title">住家</view>
						<view class="cards">
							<view :class="residence==item.value?'card1':'card'" v-for="(item, index) in list_sf" :data-id='item.value' :key='index'
							 @click="changeZj">{{item.name}}</view>
						</view>
						<view class="drawer-title">是否按星级排序</view>
						<view class="cards">
							<view :class="scoreAsc==item.value?'card1':'card'" v-for="(item, index) in list_sfpx" :data-id='item.value' :key='index'
							 @click="changeSfpx">{{item.name}}</view>
						</view>
						<view class="drawer-title">价格区间</view>
						<view class="cards">
							<input type="digit" value="" placeholder="最低价" v-model="minUnivalence" />
							~
							<input type="digit" value="" placeholder="最高价" v-model="maxUnivalence" />
						</view>
					</view>
				</scroll-view>
				<view class="hei_100"></view>
				<view class="bottom">
					<view class="button1" @click="clear()">重置</view>
					<view class="button2" @click="submit()">确定</view>
				</view>
			</view>
		</uni-drawer>
		<!-- end -->

		<!-- 筛选 -->
		<!-- <view class="laber">
			<text>做饭</text>
			<text>打扫卫生</text>
			<text>照顾孩子</text>
		</view> -->
		<!-- end -->
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN || APP-PLUS
	import amap from '@/common/amap-wx.js';
	// #endif
	import ServiceList from '@/components/list/ServiceList.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import OrderList from '@/components/OrderList.vue';
	// import MealList from '@/components/list/list-meal.vue'
	import ShopList from '@/components/list/list-shop.vue'
	import StaffList from '@/components/list/list-staff.vue'
	import provinceData from '@/pageageA/components/simple-address/city-data/province.js';
	import cityData from '@/pageageA/components/simple-address/city-data/city.js';
	import areaData from '@/pageageA/components/simple-address/city-data/area.js';
	import menuone from '@/pageageA/components/msdropdown/menu.vue';
	import uniDrawer from "@/pageageA/components/uni-drawer/uni-drawer.vue"
	import wInput from '@/components/button/watch-input.vue'; //input
	export default {
		mixins: [MescrollMixin],
		components: {
			wInput,
			menuone,
			ServiceList,
			MescrollBody,
			OrderList,
			// MealList,
			ShopList,
			StaffList,
			uniDrawer
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				width: 260,
				value: 0,
				// address: '全城',
				address: '',
				amapPlugin: null,
				value: 0,
				key: '90ef785d216807b2a246334999b5a7ec',
				tabCur: '0',
				tabs: [{
					name: '人才库',
					type: 'em'
				}, 
				// {
				// 	name: '套餐',
				// 	type: 'package'
				// },
				{
					name: '店铺',
					type: 'en'
				}],
				tabsType: 'em',
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					textLoading: '加载中 ....',
					textNoMore: '没有更多数据',
					noMoreSize: 5,
					page: {
						num: 0,
						size: 10,
						time: null
					}
				},
				goods: [], //列表数据
				page: 1,
				pages: 1,
				// list: [{
				// 	name: '全城',
				// 	value: ''
				// }],
				// 工作经验项
				list_gzjy: [{
					name: '不限',
					value: ''
				}, {
					name: '一年以上',
					value: 1
				}, {
					name: '三年以上',
					value: 3
				}, {
					name: '五年以上',
					value: 5
				}],
				// 学历项
				list_xl: [
					// 	{
					// 	name: '小学',
					// 	value: '小学'
					// }, 
					{
						name: '不限',
						value: ''
					}, {
						name: '初中',
						value: '初中'
					}, {
						name: '高中',
						value: '高中'
					}, {
						name: '中专',
						value: '中专'
					}, {
						name: '大专',
						value: '大专'
					}, {
						name: '本科',
						value: '本科'
					}, {
						name: '硕士',
						value: '硕士'
					}, {
						name: '博士',
						value: '博士'
					}
				],
				// 年龄项
				list_nl: [{
					name: '不限',
					value: ''
				}, {
					name: '25岁',
					value: 25
				}, {
					name: '35岁',
					value: 35
				}, {
					name: '45岁',
					value: 45
				}],
				// 星级项
				list_xj: [{
					name: '不限',
					value: ''
				}, {
					name: '一星',
					value: '1'
				}, {
					name: '二星',
					value: '2'
				}, {
					name: '三星',
					value: '3'
				}, {
					name: '四星',
					value: '4'
				}, {
					name: '五星',
					value: '5'
				}],
				// 是否选项
				list_sf: [{
					name: '不限',
					// value: ''
					value: 0
				}, {
					name: '是',
					value: 'true'
				}, {
					name: '否',
					value: 'false'
				}],
				// 是否按星级排序选项
				list_sfpx: [{
					name: '从高到低',
					value: 2
				}, {
					name: '从低到高',
					value: 1
				}, {
					name: '否',
					value: 0
				}],
				typeid: '',
				score: false,
				asc: false,
				age: '',
				education: '',
				workExperience: '',
				scoreNum: '',
				residence: '',
				scoreAsc: 0,
				minUnivalence: '',
				maxUnivalence: ''
			}
		},
		beforeCreate() {
			this.$options.components.itemone = require('@/components/msdropdown/item.vue').default
		},
		onLoad(option) {
			var _this = this
			// #ifdef MP-WEIXIN || APP-PLUS
			_this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			_this.getRegeo();
			// #endif

			// #ifdef H5
			_this.getLocation();
			// #endif
			_this.typeid = option.typeid || 0
			_this.opId = option.id || 0
		},
		methods: {
			clear() {
				this.score = false
				this.asc = false
				this.age = ''
				this.education = ''
				this.workExperience = ''
				this.scoreNum = ''
				// this.residence = 'false'
				this.residence = ''
				this.scoreAsc = 0
				this.minUnivalence = ''
				this.maxUnivalence = ''
				this.$refs.drawer.close()
				this.goods = []
				this.mescroll.resetUpScroll()
			},
			submit() {
				if (this.minUnivalence !== '' && this.minUnivalence < 1) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '最低价格不能低于1'
					});
					return
				}
				if (this.scoreAsc == 1) {
					this.score = true
					this.asc = true
				} else if (this.scoreAsc == 2) {
					this.score = true
					this.asc = false
				} else {
					this.score = false
					this.asc = false
				}
				this.$refs.drawer.close()
				this.goods = []
				this.mescroll.resetUpScroll()
			},
			open_sex() {
				this.$refs.popup_sex.open();
			},
			close_sex() {
				this.$refs.popup_sex.close();
			},
			open_drawer() {
				this.$refs.drawer.open();
			},
			close_drawer() {
				this.$refs.drawer.close();
			},
			changeDq(e) {
				this.address = e.target.dataset.id
				console.log(e,"this.address")
			},
			changeGzjy(e) {
				this.workExperience = e.target.dataset.id
			},
			changeXj(e) {
				this.scoreNum = e.target.dataset.id
			},
			changeXl(e) {
				this.education = e.target.dataset.id
			},
			changeNl(e) {
				this.age = e.target.dataset.id
			},
			changeZj(e) {
				this.residence = e.target.dataset.id
			},
			changeSfpx(e) {
				this.scoreAsc = e.target.dataset.id
			},
			tabSelect(e) {
				var _this = this
				_this.tabCur = e.target.dataset.id;
				_this.tabsType = e.target.dataset.type
				// _this.page = 1
				// _this.pages = 1
				_this.goods = []
				_this.mescroll.resetUpScroll()
			},
			// goBack() {
			// 	this.$Router.back();
			// },
			// #ifdef MP-WEIXIN || APP-PLUS
			getRegeo() {
				let _this = this
				// uni.showLoading({
				// 	title: '获取信息中'
				// });
				this.amapPlugin.getRegeo({
					success: data => {
						console.log(data,"位置")
						let province = data[0].regeocodeData.addressComponent.province;
						_this.address = data[0].regeocodeData.addressComponent.city;
						console.log(_this.address)
						// let table = [{
						// 	name: '全城',
						// 	value: '1'
						// }]
						// for (let i = 0; i < provinceData.length; i++) {
						// 	if (provinceData[i].label == province) {
						// 		for (let j = 0; j < cityData[i].length; j++) {
						// 			console.log(cityData[i][j].label)
						// 			console.log(city)
						// 			if (cityData[i][j].label == city) {
						// 				for (let k = 0; k < areaData[i][j].length; k++) {
						// 					table.push({
						// 						name: areaData[i][j][k].label,
						// 						value: areaData[i][j][k].value
						// 					})
						// 				}
						// 				_this.list = table
						// 				return
						// 			}
						// 		}
						// 	}
						// }
						// uni.hideLoading();
					}
				});
			},
			// #endif
			// #ifdef H5
			getLocation() {
				uni.getLocation({
					success: function(res) {
						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
							method: 'GET',
							data: {
								key: '3cd11ea078502a52c04bba3098ccc67d',
								location: '${res.longitude}, ${res.latitude}'
							},
							success: data => {
							},
							fail(err) {
								console.log(err);
							}
						});
					}
				});
			},
			// #endif
			//下拉刷新的回调
			downCallback(page) {
				console.log('下拉')
				var _this = this
				_this.goods = []
				_this.mescroll.resetUpScroll()
				// _this.$http
				// 	.get('/lookfor/service/getemployaboutbusinessorenterprise/' + _this.tabsType + '/' + _this.opId,{
				// 		page:page.num,
				// 		size:page.size,
				// 		typeid: 0,
				// 		// typeid: _this.typeid,
				// 		serviceregion: _this.address=='全城'?'':_this.address
				// 	})
				// 	.then(function(response) {
				// 		//联网成功的回调,隐藏下拉刷新的状态
				// 		_this.goods = response.data.list
				// 		_this.pages = response.data.pages
				// 		// _this.mescroll.endSuccess(response.data.length,true)
				// 		_this.mescroll.endBySize(response.data.length,response.data.total);

				// 	})
				// 	.catch(function(error) {
				// 		console.log(error);
				// 		_this.mescroll.endErr();
				// 	});
			},
			//上拉加载的回调
			upCallback(page) {
				var _this = this
				_this.$http
					.get('/user/search/getempandent/' + _this.tabsType + '/' + _this.opId, {
						page: page.num,
						size: page.size,
						// serviceregion: _this.address == '全城' ? '' : _this.address,
						city: _this.address == '' ? '全城' : _this.address,
						// typeid: typeidtypeid,
						score: _this.score,
						asc: _this.asc,
						age: _this.age,
						education: _this.education,
						workExperience: _this.workExperience,
						scoreNum: _this.scoreNum,
						residence: _this.residence,
						minUnivalence: _this.minUnivalence,
						maxUnivalence: _this.maxUnivalence
					})
					.then(function(response) {
						if (response.success) {
							//设置列表数据
							if (response.data.list && response.data.list.length > 0) {
								_this.goods = _this.goods.concat(response.data.list)
								console.log(_this.goods,"_this.goods")
							}
							_this.mescroll.endBySize(response.data.list.length, response.data.total)
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: response.msg
							});
						}

					})
					.catch(function(error) {
						console.log(error);
						_this.mescroll.endErr();
					});
			}
		}
	}
</script>

<style scoped lang="scss">
	html,
	body {
		height: 100%;
		margin: 0;
	}

	/* 导航 */
	.header {
		height: 95rpx;
		width: 100%;
		background: #fff;
		line-height: 95rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
		display: flex;
		justify-content: space-between;
	}

	.header image {
		margin-top: 32rpx;
		width: 38rpx;
	}

	.header .fl text {
		// margin-left: 14rpx;
	}

	.header .tab {
		    margin: 0 auto;
		    width: 80%;
		    display: flex;
		    justify-content: space-around;
	}

	.header .tab text {
		text-align: center;
		display: inline-block;
		font-size: 30rpx;
		color: #666;
		position: relative;
	}

	.header .tab .tit {
		// margin-right: 90rpx;
	}

	.header .tab .tit:last-child {
		margin-right: 0;
	}

	.header .tab .cur {
		font-weight: 500;
		color: #333;
		font-size: 32rpx;
	}

	.header .tab .cur .cur_sp1 {
		position: absolute;
		width: 30rpx;
		height: 4rpx;
		background: $uni-color1;
		border-radius: 2rpx;
		right: 32rpx;
		bottom: 0;
	}
	.header .tab .cur .cur_sp2 {
		position: absolute;
		width: 30rpx;
		height: 4rpx;
		background: $uni-color1;
		border-radius: 2rpx;
		right: 17rpx;
		bottom: 0;
	}

	/* 筛选 */
	.screen {
		width: 100%;
		font-size: 26rpx;
		color: #666;
		padding: 10rpx 32rpx 10rpx 32rpx;
		line-height: 55rpx;
		position: fixed;
		left: 0;
		top: 95rpx;
		background-color: #fff;
		z-index: 100;
	}

	.screen .fl {
		font-size: 24rpx;
		padding: 0 24rpx;
		min-height: 55rpx;
		border-radius: 10rpx;
		border: 2rpx solid #F6F6F7;
		overflow: hidden;
		/* background: #F6F6F7; */
	}

	.screen .fl image {
		width: 16rpx;
		margin-left: 6rpx;
	}

	.screen .fr image {
		width: 25rpx;
		margin-left: 2rpx;
	}

	.dropdown-item__selected {
		padding: 0;
	}

	.cont_sex {
		background-color: #fff;
		text-align: center;
	}

	.cont_sex view {
		height: 36rpx;
		line-height: 36rpx;
		font-size: 24rpx;
		border-bottom: 1rpx solid #E7E7E7;
	}

	.cont_sex view:last-child {
		border-top: 10rpx solid #F6F6F9;
	}

	.icon {
		width: 16rpx !important;
		height: 16rpx !important;
		margin-top: 20rpx;
	}

	.drawer-body {
		padding: 0rpx 30rpx 30rpx 30rpx;
		height: calc(100% - 150rpx);
	}

	.drawer-card {
		/* height: calc(100% - 350rpx); */
		height: 100%;
		overflow-y: auto;
	}

	.drawer-title {
		font-size: 28rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.cards {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.cards input {
		float: left;
		width: 150rpx;
		height: 50rpx;
		border: gray 1rpx solid;
		border-radius: 10rpx;
	}

	.card {
		font-size: 24rpx;
		border-radius: 4px;
		line-height: 33rpx;
		border: 1px solid #b7b7b8;
		color: #b7b7b8;
		padding: 4rpx 14rpx;
		margin-bottom: 10rpx;
		margin-right: 16rpx;
	}

	.card1 {
		font-size: 24rpx;
		border-radius: 4px;
		line-height: 33rpx;
		border: 1px solid $uni-color1;
		color: $uni-color1;
		padding: 4rpx 14rpx;
		margin-bottom: 10rpx;
		margin-right: 16rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 88%;
		height: 100rpx;
		font-size: 30rpx;
	}

	.button1 {
		float: left;
		background-color: #eaeaeb;
		color: gray;
		border-radius: 10rpx;
		// width: 180rpx;
		width: 44%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.button2 {
		float: right;
		background-color: $uni-color1;
		color: #FFFFFF;
		border-radius: 10rpx;
		// width: 180rpx;
		width: 44%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
